<template>
  <div class="enterpriseTemplate">
    <div class="top">
      <div class="left" @click="is_show_add_template=true"><i></i>新增模板</div>
    </div>
    <div class="content">
      <vuescroll :ops="ops">
        <el-table
          :data="template_list"
          border
          style="width: 100%">
          <el-table-column
            prop="name"
            label="企业模板名称"
          >
          </el-table-column>
          <el-table-column
            prop="addTime"

            label="模板制作时间">
          </el-table-column>
          <el-table-column prop="userName" label="模板制作人" width="150">
            <!--            <template slot-scope="scope">-->
            <!--              <span v-if="scope.row.level==1">高级用户</span>-->
            <!--              <span v-if="scope.row.level==2">普通用户</span>-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state==0">禁用</span>
              <span v-if="scope.row.state==1">启用</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作" width="200">
            <template slot-scope="scope">
              <span class="permission_edit" @click="handleEdit(scope.row)"></span>
              <span class="permission_del" @click="handleDelete(scope.row)">
              </span>
            </template>
          </el-table-column>
        </el-table>
      </vuescroll>
    </div>
    <!--    新增模板弹框-->
    <div v-if="is_show_add_template">
      <addTemplate @close="closeAddTemplate" @update="get_template_list" :flag="2"></addTemplate>
    </div>
    <!--    编辑模板弹框-->
    <div v-if="is_show_edit_template">
      <editTemplate @close="closeEditTemplate" @update="get_template_list" :groupId="edidGroupId"></editTemplate>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import addTemplate from '@/components/addTemplate/add';
  import editTemplate from '@/components/addTemplate/edit';
  import vuescroll from 'vuescroll'
  import loading from '@/components/loading'
  export default {
    name: "EnterpriseTemplate",
    components: {
      vuescroll, addTemplate, editTemplate,loading
    },
    data() {
      return {
        is_show_loading:true,
        is_show_add_template: false,
        is_show_edit_template:false,
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '100px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        template_list: [],//模板列表
      }
    },
    created() {
      this.get_template_list();
    },
    methods: {
      //关闭新增模板弹框
      closeAddTemplate() {
        this.is_show_add_template = false
      },
      //关闭编辑模板弹框
      closeEditTemplate(){
        this.is_show_edit_template=false;
      },
      get_template_list() {
        this.$http.get('plan/plan/temp/list', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            flag: 2,
            userId: this.$store.state.userInfo.userId,
            stateFlied:2
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.template_list = res.data;
            console.log(this.template_list);
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      handleEdit(data) {
        this.is_show_edit_template = true;
        this.edidGroupId=data.groupId;
      },
      handleDelete(data) {
        console.log(data);
        let _this = this;
        this.$confirm('删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.$http.post('plan/plan/temp/deleteAll', {groupId: data.groupId}).then(res => {
            if (res.statusCode == 200) {
              _this.$message.success('删除成功');
              _this.get_template_list();
            } else {
              _this.$message.error(res.statusMsg);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .enterpriseTemplate {
    width: 100%;
    height: 100%;
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
    position: relative;
    .permission_del {
      display: inline-block;
      cursor: pointer;
      background-image: url("../../../assets/img/ht/member/ic_me_delete.png");
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      margin-top: 5px;
    }

    .permission_edit {
      display: inline-block;
      cursor: pointer;
      background-image: url("../../../assets/img/ht/member/ic_me_edit.png");
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      margin-right: 56px;
      margin-top: 5px;
    }

    > .top {
      height: 88px;
      padding: 0 24px;
      box-sizing: border-box;

      .left {
        float: left;
        padding-top: 37px;
        padding-left: calc(45px - 24px);
        font-size: 14px;
        color: #96A2AA;
        position: relative;
        cursor: pointer;

        i {
          position: absolute;
          width: 12px;
          height: 12px;
          left: 0;
          top: 37px;
          background-image: url("../../../assets/img/ht/ic_add2.png");
          background-size: cover;
          background-position: center;
        }
      }

      .right {
        margin-top: 24px;
        float: right;
        width: 320px;
        height: 40px;
        background-color: #F2F6F9;
        border-radius: 6px;
        position: relative;

        > input {
          height: 40px;
          line-height: 40px;
          border: none;
          width: 280px;
          background: none;
          text-indent: 16px;
          font-size: 14px;
        }

        > i {
          position: absolute;
          width: 18px;
          height: 18px;
          right: 12px;
          top: 12px;
          cursor: pointer;
          background-image: url("../../../assets/img/ht/member/ic_search.png");
        }
      }
    }

    > .content {
      height: calc(100% - 88px - 32px);
      display: flex;

      .page {
        .el-pagination {
          text-align: right;
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .enterpriseTemplate {
    .el-table td, .el-table th {
      text-align: center;
    }

    .has-gutter {
      tr {
        background-color: #F2F6F9;
      }

      th {
        background-color: #F2F6F9;
      }

    }

    .page {
      .el-pagination {
        text-align: right;
        padding-top: 10px;
      }
    }

    .el-table--border {
      border: none;
    }

    .el-table--border th, .el-table--border td {
      border-right: none;
    }

    .el-table td {
      border-color: #EEEEEE;
    }

    .el-table--border::after, .el-table--group::after, .el-table::before {
      background: none;
    }

    .row {
      /*.el-input__inner, .el-textarea__inner {*/
      /*  width: 320px;*/
      /*  background-color: #f2f6f9;*/
      /*  border-color: #f2f6f9;*/
      /*}*/
    }

    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #ffffff;
    }
  }

</style>
